Add link to coaching notes editor #98

zgavin1 · 2025-04-03T16:42:23Z

Description

Editor feature for adding/removing links.

A user may now in the coaching notes editor incorporate hyperlink(s) into the editor content.

The toolbar button should open a dialog box with a field for the url.

Large part of this logic borrowed from TipTap's example

Link text should be highlighted a standard blue.

Addresses: https://docs.google.com/document/d/10gTCL0uNu1VHEFQl_PzPmnn07QOcDw89ta5C-UVh9vQ/edit?tab=t.0#heading=h.r4v5w0aeykos

Changes

Install and add link extension to extensions groups
Add toolbar button for link to toolbar
Add link dialog component
Logic for inserting/removing link

Screenshots / Videos Showing UI Changes (if applicable)

Testing Strategy

Navigate to a coaching session
Click link button in toolbar
Insert a link
Insert another link
Remove a link
Update an existing link

Concerns

@jhodapp We may want to review some specifics with how you want this to work - validating links, disallowing some domains, etc. Will leave this in draft until we chat about that

jhodapp

Looking great Zach, thank you for this. A few suggestions inline.

How difficult would it be to allow for updating an existing link and then following the link if one presses ?

jhodapp · 2025-04-03T16:52:12Z

src/components/ui/coaching-sessions/coaching-notes/extensions.tsx

+            : new URL(`https://${url}`);
+
+          // only auto-link if the domain is not in the disallowed list
+          const disallowedDomains = [


@zgavin1 I think a good central place for this list right now is to place this in site.config.ts under siteConfig { tiptap { links { } } }

I can also just comment this out.. Do we even want these?

I think so, it's probably better to have it than not. No immediate use but I'm guessing it's a pattern for TipTap for a good reason.

jhodapp · 2025-04-03T16:55:35Z

src/components/ui/coaching-sessions/coaching-notes/link-dialog.tsx

+        <DialogHeader>
+          <DialogTitle>Insert Link</DialogTitle>
+          <DialogDescription>
+            Insert a url for a link in your document.


Suggested change

Insert a url for a link in your document.

Insert URL for your link.

jhodapp · 2025-04-03T17:02:30Z

src/styles/styles.scss

+  a {
+    color: #0000EE;
+    text-decoration: underline;
+  }


Is this still needed?

jhodapp · 2025-04-03T17:15:18Z

src/components/ui/coaching-sessions/coaching-notes/toolbar.tsx

+          onClick={() => setIsLinkDialogOpen(true)}
+          isActive={editor.isActive("link")}
+          icon={<Link className="h-4 w-4" />}
+          title="Link"


@zgavin1 Can you dynamically have this text change like so:

"Insert Link (Ctrl+K)" for when inserting a link

"Update Link (Ctrl+K)" when one has highlighted a link?

jhodapp

A few suggestions inline, looking great Zach.

Right click to open link doesn't work for me, but perhaps you can learn from this solution to give SHIFT + left click another try.

jhodapp · 2025-04-08T17:30:37Z

src/components/ui/coaching-sessions/coaching-notes/toolbar.tsx

+              ? "Update link (Ctrl + k)"
+              : "Insert link (Ctrl + k)"


Suggested change

? "Update link (Ctrl + k)"

: "Insert link (Ctrl + k)"

? "Update Link (Ctrl + k)"

: "Insert Link (Ctrl + k)"

This makes it consistent with the other buttons' tooltip capitalization.

jhodapp · 2025-04-08T17:36:43Z

src/components/ui/coaching-sessions/coaching-notes/toolbar.tsx

+  // Add keyboard shortcut handler
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "k") {


This isn't working today because of our command menu at the top, it listens for CMD + k as well which is in conflict. We do want to hide/remove that search for the beta anyway, so if you do that, this should work.

I changed the key combination to listen for 'l' and then CTRL + l worked for me.

Oh interesting, had to test this myself because it was definitely working for me when I committed it.

When I'm on a coaching notes page AND focus is in the editor, it works exactly as I'd expect it to (link entry dialog opens). But if focus is NOT in the editor, it behaves incorrectly.: it opens the link entry dialog AND the keyboard shortcut dialog. To me that means that the command menu is working properly (i.e. not listening for cmd + k when focus is in the editor. I could just do the reverse here, ensure the link shortcut on works when editor is focused.

@jhodapp or, were you seeing a totally different behavior?

jhodapp · 2025-04-08T17:38:46Z

src/components/ui/coaching-sessions/coaching-notes/extended-link-extension.tsx

+      // Placeholder for future disallowed domains if we want to add any
+      // const disallowedProtocols = ["ftp", "file", "mailto"];
+      // const protocol = parsedUrl.protocol.replace(":", "");
+
+      // if (disallowedProtocols.includes(protocol)) {
+      //   return false;
+      // }
+
+      // // only allow protocols specified in ctx.protocols
+      // const allowedProtocols = ctx.protocols.map((p) =>
+      //   typeof p === "string" ? p : p.scheme
+      // );
+
+      // if (!allowedProtocols.includes(protocol)) {
+      //   return false;
+      // }
+
+      // Placeholder for future disallowed domains if we want to add any
+      // const disallowedDomains = [
+      //   "example-phishing.com",
+      //   "malicious-site.net",
+      // ];
+      // const domain = parsedUrl.hostname;
+
+      // if (disallowedDomains.includes(domain)) {
+      //   return false;
+      // }


Is this still needed? You have implemented some or all of this already from what I can tell.

Can definitely remove it. It's not the same as what I've implemented, its more like custom validation that we could absolutely hold off on implementing until its really needed.

…ments

calebbourg

Love it!

to pass gh action

zgavin1 requested a review from jhodapp April 3, 2025 16:42

jhodapp assigned zgavin1 Apr 3, 2025

jhodapp added enhancement Improves existing functionality or feature feature work Specifically implementing a new feature labels Apr 3, 2025

jhodapp added this to Refactor Coaching Platform Apr 3, 2025

jhodapp moved this to Review in Refactor Coaching Platform Apr 3, 2025

jhodapp added this to the 1.0-beta1 milestone Apr 3, 2025

jhodapp requested changes Apr 3, 2025

View reviewed changes

jhodapp reviewed Apr 3, 2025

View reviewed changes

jhodapp moved this from Review to 🏗 In progress in Refactor Coaching Platform Apr 3, 2025

zgavin1 requested a review from jhodapp April 8, 2025 01:22

zgavin1 marked this pull request as ready for review April 8, 2025 01:22

jhodapp moved this from 🏗 In progress to Review in Refactor Coaching Platform Apr 8, 2025

jhodapp previously requested changes Apr 8, 2025

View reviewed changes

zgavin1 added 6 commits April 12, 2025 10:12

wip adding link button with dialog for text and url inputs

4cc622c

Get links working in editor

00b4dc4

Comment out some placeholder logic for link extension

27cbb15

progress on linking improvements and review comments

1cb2303

Add default protocol, basic validation

c4fa96e

pr comments - get shift click working for links, remove extension com…

4f9b6b5

…ments

zgavin1 force-pushed the add-link-to-coaching-notes-editor branch from 4bdc197 to 4f9b6b5 Compare April 12, 2025 15:12

add editor focus condition for link shortcut behavior

1f2bb17

zgavin1 requested a review from jhodapp April 12, 2025 17:01

calebbourg approved these changes Apr 12, 2025

View reviewed changes

Merge branch 'main' into add-link-to-coaching-notes-editor

d53931a

fix react error

155f97f

zgavin1 merged commit 86845e1 into main Apr 12, 2025
5 checks passed

zgavin1 deleted the add-link-to-coaching-notes-editor branch April 12, 2025 22:47

github-project-automation bot moved this from Review to ✅ Done in Refactor Coaching Platform Apr 12, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add link to coaching notes editor #98

Add link to coaching notes editor #98

zgavin1 commented Apr 3, 2025 •

edited by jhodapp

Loading

jhodapp left a comment

jhodapp Apr 3, 2025

zgavin1 Apr 3, 2025

jhodapp Apr 3, 2025

jhodapp Apr 3, 2025

jhodapp Apr 3, 2025

jhodapp Apr 3, 2025

jhodapp left a comment

jhodapp Apr 8, 2025

jhodapp Apr 8, 2025

zgavin1 Apr 12, 2025

jhodapp Apr 8, 2025

zgavin1 Apr 12, 2025

calebbourg left a comment

	Insert a url for a link in your document.
	Insert URL for your link.

Add link to coaching notes editor #98

Add link to coaching notes editor #98

Conversation

zgavin1 commented Apr 3, 2025 • edited by jhodapp Loading

Description

Changes

Screenshots / Videos Showing UI Changes (if applicable)

Testing Strategy

Concerns

jhodapp left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jhodapp left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

calebbourg left a comment

Choose a reason for hiding this comment

zgavin1 commented Apr 3, 2025 •

edited by jhodapp

Loading